<template>
  <div class="paper-list">
    <!-- 筛选 -->
    <div class="paper-filter">
      <el-form
        :inline="true"
        label-position="right"
        label-width="80px"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="试卷名称">
              <el-input
                v-model="query.paper_name"
                placeholder="请输入试卷名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属学科">
              <el-select
                v-model="query.subject_id"
                placeholder="请选择学科"
                clearable
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属目录">
              <el-select
                v-model="query.directory_id"
                placeholder="请选择目录"
                clearable
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷状态">
              <el-select
                v-model="query.show_state"
                placeholder="请选择试卷状态"
                clearable
              >
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷难度">
              <el-select
                v-model="query.difficulty"
                placeholder="请选择难度"
                clearable
              >
                <el-option label="简单" :value="1"></el-option>
                <el-option label="中等" :value="2"></el-option>
                <el-option label="较难" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷类型">
              <el-select
                v-model="query.paper_type"
                placeholder="请选择试卷类型"
                clearable
              >
                <el-option label="模拟卷" :value="1"></el-option>
                <el-option label="真题卷" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input
                v-model="query.create_name"
                placeholder="请输入创建人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="21">
            <el-button type="primary" size="small" @click="searchsubmit"
              >查询</el-button
            >
            <el-button size="small" @click="searchcancel">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table-bg">
      <el-table border :data="list">
        <el-table-column
          prop="paper_name"
          width="280px"
          label="试卷名称"
        ></el-table-column>
        <el-table-column
          prop="subject_name"
          width="140px"
          align="center"
          label="学科名称"
        ></el-table-column>
        <el-table-column
          prop="directory_name"
          width="140px"
          align="center"
          label="目录名称"
        ></el-table-column>
        <el-table-column
          prop="paper_type"
          width="90px"
          align="center"
          label="试卷类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.paper_type == 1">模拟卷</span>
            <span v-if="scope.row.paper_type == 2">真题卷</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="show_state"
          align="center"
          width="90px"
          label="试卷状态"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.show_state"
              :active-value="1"
              :inactive-value="2"
              @change="changePaperStatus(scope.row.id, $event)"
            />
          </template>
        </el-table-column>
        <el-table-column width="90px" align="center" label="分数情况">
          <template slot-scope="scope">
            <span>{{ scope.row.pass_score }}/{{ scope.row.total_score }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          width="90px"
          align="center"
          label="试卷难度"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-if="scope.row.difficulty == 2">中等</span>
            <span v-if="scope.row.difficulty == 3">较难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_name"
          width="200px"
          align="center"
          label="创建人"
        ></el-table-column>
        <el-table-column
          prop="created_at"
          width="200px"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            {{ scope.row.created_at | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="查看"
              placement="top"
            >
              <el-button
                size="small"
                type="text"
                @click="$emit('show', scope.row)"
                icon="el-icon-view"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改"
              placement="top"
            >
              <el-button
                size="small"
                type="text"
                @click="$emit('edit', scope.row)"
                icon="el-icon-edit"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                size="small"
                type="text"
                @click="delHandler(scope.row)"
                icon="el-icon-delete"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <!-- <span>共 6 条</span> -->
      <el-pagination
        background=""
        layout="total,sizes,prev,pager,next,jumper"
        :total="page.total"
        :current-page="page.page"
        :page-size="page.limit"
        :page-sizes="[10, 20, 40]"
        @current-change="changePage"
        @size-change="changeSize"
      />
    </el-row>
  </div>
</template>

<script>
import { getPaperList, deletePaper, changePaperStatus } from "@/api/exam/page";
import { mapGetters, mapActions } from "vuex";

const defaultItem = {
  subject_id: "",
  directory_id: "",
  paper_name: "",
  difficulty: "",
  show_state: "",
  paper_type: "",
  create_name: "",
  create_time: "",
};
export default {
  name: "PaperList",
  data() {
    return {
      time: [],
      query: { ...defaultItem },
      list: [],
      page: {
        page: 1, // 当前页码
        limit: 10,
        total: 0, // 总数
      },
    };
  },
  computed: {
    ...mapGetters({ treeList: "subject/treeList" }),
    directoryList() {
      // 目录信息
      if (!this.query.subject_id) {
        return [];
      } else {
        this.query.directory_id = "";
        const result = this.treeList.find(
          (val) => val.id == this.query.subject_id
        );
        return result.children;
      }
    },
  },
  created() {
    this.getPaperList();
    !this.treeList.length && this.loadTreeList({ ...this.query });
  },
  methods: {
    ...mapActions({
      loadTreeList: "subject/loadTreeList",
    }),
    // 获取考试列表
    async getPaperList() {
      const { query } = this;
      query.create_time = this.createTime;
      const { data } = await getPaperList({
        page: this.page.page,
        limit: this.page.limit,
        ...this.query,
      });
      this.list = data.list;
      this.page.total = data.total;
    },
    // 获取树形数据
    // async getTreeList() {
    //   const { data } = await getTreeList();
    //   this.treeList = data.list;
    //   console.log(data);
    // },
    async delHandler(val) {
      // 下架 即可删除
      if (val.show_state == 1)
        return this.$message.warning("禁用情况下才可以删除");
      // 删除操作
      try {
        await this.$confirm("确定删除吗,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      } catch (e) {
        return this.$message.info("已取消");
      }
      await deletePaper(val.id);
      this.$message.success("删除成功");
      // 页码退1
      if (this.page * 1 !== 1 && this.list.length === 1) {
        this.page--;
      }
      this.getPaperList();
    },
    // 修改状态
    async changePaperStatus(id, state) {
      console.log(state);
      await changePaperStatus(id, state);
      this.$message.success("切换成功");
    },
    // 取消按钮
    searchcancel() {
      this.query = {
        ...defaultItem,
      };
      this.getPaperList();
    },
    // 表单提交
    searchsubmit() {
      const { data } = this.getPaperList({ ...this.query });
      this.list = data;
    },
    // 分页修改
    changePage(val) {
      this.page.page = val;
      this.getPaperList();
      window.scroll(0, 0);
    },
    changeSize(val) {
      this.page.limit = val;
      this.getPaperList();
    },
  },
};
</script>

<style scoped lang="scss">
.paper-list {
  width: 100%;
  height: 100%;
}
.paper-filter {
  background-color: #fff;
  padding: 16px;
}
.el-date-editor--daterange {
  width: 200px;
}
.table-bg {
  padding: 16px;
}
</style>
